<template>
	<view>
		<tool-status-bar></tool-status-bar>
		<view class="search-top">
			<view class="search-left">
				<view class="search-icon uni-icon uni-icon-search"></view>
				<input class="search-input" type="text" v-model="searchInput" @confirm="doSearch(searchInput)" />
			</view>
			<text class="cancel" @click="$goBack(1,1)">取消</text>
		</view>
		<nodata class="noData" v-if="isData"></nodata>
		<view class="listview" v-for="(item,index) in listData" :key="index">
			<view class="item_phone" @click="call(item.telNum)">
				<text class="item_title">{{item.telNum}}</text>
				<view class="item_context">
					<text>{{item.zipCode=="00"?"全国":item.zipCode}}</text>
					<text style="margin-left: 30rpx;">{{item.telType}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import nodata from '@/components/nodata.vue'
	import toolStatusBar from '@/components/tool-status-bar/tool-status-bar.vue'
	export default {
		components: {
			toolStatusBar,
			nodata

		},
		data() {
			return {
				isData: true,
				listData: [],
				searchInput: "",
				historyList: [],
			}
		},
		mounted() {
			// uni.getStorage({
			// 	key: 'historyList',
			// 	success: (res) => {
			// 		this.historyList = res.data
			// 	}
			// })
		},
		methods: {


			//拨打电话
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			//请求数据
			doSearch(key = "") {
				if (!key) {
					uni.showToast({
						title: '请输入关键词',
						icon: 'none'
					})
					return false;
				}
				this.$api.phoneList({
					'telNum': "",
					'zipName': key,
					'current': 1,
					'size': 1000,
				}).then(res => {
					if (res.data['code'] == 200) {
						console.log(res)
						this.listData = res.data['data']['records'];
						this.isData = !this.listData.length > 0 ? true : false
					}
				}).catch(res => {

				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.noData {
		padding-top: 500rpx;
		margin: 0rpx auto;

	}

	.listview {
		padding-top: 20rpx;

		.item_phone {
			background-color: #ffffff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			padding: 20rpx;
			display: flex;
			flex-direction: column;

			.item_title {
				font-size: 32rpx;
				font-weight: 700;
			}

			.item_context {
				margin-top: 20rpx;
				display: flex;

				text {
					font-size: 28rpx;
				}
			}
		}
	}

	.search-top {
		background-color: #FFFFFF;
		border-bottom: 2rpx solid #FFFDEF;
		padding: 30rpx;
		display: flex;

		.search-left {
			background-color: #ddd;
			flex: 1;
			display: flex;
			padding: 10rpx 20rpx;
			margin-right: 20rpx;
			line-height: 32rpx;
			border-radius: 72rpx;

			.search-icon {
				color: #666;
			}

			.search-input {
				flex: 1;
				padding: 0 30rpx;
			}
		}

		.cancel {
			line-height: 32rpx;
			padding: 20rpx 0;
		}
	}

	.history-box {
		padding: 40rpx;

		.history-top {
			display: flex;
			line-height: 32rpx;

			.iconfont {
				color: #999999;
			}

			.text-icon {
				margin-right: 20rpx;
			}

			.text {
				flex: 1;
				font-size: 32rpx;
			}
		}

		.history-list {
			padding-top: 40rpx;
			margin: 0 -15rpx;

			.history-item {
				margin: 15rpx 10rpx;
				display: inline-block;
				border-radius: 8rpx;
				padding: 0 .6em;
				background-color: #DDDDDD;
				font-size: 28rpx;
				line-height: 2em;
			}
		}
	}
</style>
